<template>
  <div>
    <div @click="clickSourceItem" class="c-flex-row c-aligni-end">
      <div class="c-fc-xblue c-fs20 c-mr20" v-if="(isSelf&&!isTeacher)&&(item.msgType != 66 && item.msgType != 65)&&!isFormPrivate" @click.stop="backInfo(itemIndex)">撤回</div>
      <!-- 发言为本地图片 -->
      <div v-if="item.msgType == 110" class="msg-box-br-right">
        <img class="msg-box-br-right c-hh200 img-pe-none" :src="$addXossFilter(item.content)" alt="" />
      </div>
      <!-- 发言为本地语音 -->
      <div v-else-if='item.msgType == 120' class="c-flex-row c-aligni-center">
        <div class="c-bg-xblue  c-ww100 c-ph16 c-hh64 msg-box-br-right">
        </div>
      </div>
      <div v-else-if="item.msgType ==76" :class="isSelf ? 'c-bg-xblue c-fc-white msg-box-br-right':'c-bg-white msg-box-br-left'"
        class="c-maxw400  c-inlineblack c-wb-ba c-ph24 c-pv8 c-fs26 c-textAlign-l">
        <span v-if="item.subProdType==3" :class="isSelf ?'c-fc-white':'c-fc-green'">【推送】</span>
        <span class=" c-lh-18 c-vcAlign-middle" :class="isSelf ?'pickclassBoxSelf':'pickclassBox'" v-html="$options.filters.sensitiveWordFilter(item.content,this)"></span>
      </div>
      <!-- 发言为文字 -->
      <div v-else-if="item.msgType == 1||item.msgType == 18 || item.msgType == 66 || item.msgType == 65" :class="isSelf ? 'c-bg-xblue c-fc-white msg-box-br-right':'c-bg-white msg-box-br-left'"
        class="c-maxw400  c-inlineblack c-wb-ba c-ph24 c-pv8 c-fs26 c-textAlign-l  c-wb-ba c-text-hidden" @click.stop="reQuert(item)">
        <div v-if="item.msgType == 18" :class="isSelf ? 'my-que-icon':'other-que-icon'" class="text-question c-inlineblack c-vcAlign-middle c-bg-orglinera">问</div>
        <span class="c-fc-xxlred" v-if="item.msgType == 66 || item.msgType == 65">@所有人<br></span>
        <span v-if="item.subProdType==3" :class="isSelf ?'c-fc-white':'c-fc-green'">【推送】</span>
        <span class=" c-lh-18 c-vcAlign-middle c-ws-pw" v-html="$options.filters.sensitiveWordFilter(item.content,this)"></span>
      </div>
      <!-- 发言为图片 -->
      <div v-else-if="item.msgType == 2" :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" @click="clickPreviewImage(itemIndex)">
        <!--v-lazy-container="{ selector: 'img' }"-->
        <img class="c-hh200 img-pe-none" :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" :src="$addXossFilter(item.content, require('@/assets/no_chat_img.png'))" alt="" />
      <!-- <img class="c-hh200 img-pe-none" :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" :data-src="item.content || require('@/assets/no_chat_img.png')" οnerrοr="this.src=require('@/assets/no_chat_img.png')" alt="" /> -->
      </div>
      <!-- 发言为语音 -->
      <div v-else-if='item.msgType == 3 || item.msgType == 68' class="c-flex-row c-fs20" style="overflow:hidden;" @touchstart='longTouchStart($event)' @touchmove='longTouchMove($event)' @touchend='longTouchEnd($event)'>
        <div @click="clickItemAudio(itemIndex)" :class="isSelf ? 'c-bg-xblue c-fc-white msg-box-br-right':'c-bg-white c-fc-green msg-box-br-left'"
          :style="'width:' + (4.5 + item.voiceDuration * 1/10) + 'rem;max-width:11rem;'" class="c-p c-flex-row c-aligni-center c-ph24 c-hh64">
          <div class="time-show" v-show="showCurTime">
            <span class="tip-icon"></span>
            <span class="c-fc-white c-fs30">{{curTime}}"</span>
          </div>
          <i @click="clickIconAudio(itemIndex)" class="iconfont c-pr10 c-fs40" :class="isSelf ? 'c-fc-white':'c-fc-green'" v-show="playAduioSrc != item.content || playStatus== 0">&#xe869;</i>
          <i @click="clickPlayAudio(itemIndex)" class="iconfont c-pr10 c-fs40" :class="isSelf ? 'c-fc-white':'c-fc-green'" v-show='playAduioSrc == item.content && playStatus == 1'>&#xe86a;</i>
          <input :class="isSelf ? 'self-input' : 'other-input'" type="range" v-model="curTime" v-show="playAduioSrc == item.content" :max="item.voiceDuration" min="0" @input="dragOn($event)"
            @change='dragEnd($event)' :style="'background-size:' + curTime * 100/item.voiceDuration + '% 100%'">
          <div class="c-pl10 c-fs20 c-fc-xblack c-flex-grow1 c-w0 min-width c-textAlign-r">{{item.voiceDuration}}''</div>
        </div>
        <div v-if="!isSelf" class="c-pl10 c-fs20">
          <div v-show="localMsgReadList.indexOf(item.socialRoomMessageId) <= -1" class="c-ww8 c-hh8 c-brp50 red-point"></div>
        </div>
      </div>
      <!-- 发言为视频 -->
      <div v-else-if="item.msgType == 4" class="c-flex-row c-ww200 c-hh114 c-p c-pz1 c-text-hidden">
        <div @click.stop="clickPlayMsgVideo" class="c-ww200 c-hh114 c-pa c-p-l0 c-p-t0 c-pz1 video-msg-item  c-flex-row c-flex-center">
          <img :src="$addXossFilter(item.content.cover, require('@/assets/img_msg_video_default.png'))" class="c-pa c-p-t0 c-p-l0 c-pz1 c-ww200 c-hh114 img-pe-none" alt="">
          <img src="@/assets/i/wap/live/img_play_btn.png" class="c-p c-pz6 c-ww50 c-hh50 c-brp50 " alt="">
        </div>
        <div :id="isTeacher ? `teacher${item.socialRoomMessageId}`:`chat${item.socialRoomMessageId}`" class="no-touch">
        </div>

      </div>
      <!-- 发言为答案 -->
      <div v-else-if='item.msgType == 19 || item.msgType == 20 || item.msgType == 21' :class="isSelf ? 'c-bg-white msg-box-br-right':'c-bg-white msg-box-br-left'"
        class="c-maxw400 c-flex-column c-text-hidden c-ph16">
        <!-- 问题内容 -->
        <div class="c-inlineblack c-wb-ba c-pv16  c-fs26 c-textAlign-l c-bd-bd1-ccc" @click.stop="reQuert(item)">
          <div :class="isSelf ? 'my-que-icon':'other-que-icon'" class="text-question c-inlineblack c-vcAlign-middle c-bg-orglinera">问</div>
          <span class="c-lh-28 c-vcAlign-middle c-ws-pw" v-html="$options.filters.sensitiveWordFilter(item.subContent,this)"></span>
        </div>
        <!-- 答案内容:class="isSelf ? 'c-fc-white':'c-fc-green'" -->
        <div class=" c-pv16 c-textAlign-l c-fs26">
          <div :class="isSelf ? 'my-answer-icon':'other-answer-icon'" class="text-question c-inlineblack c-vcAlign-middle c-bg-grelinera">答</div>
          <span class="c-ph10 c-fc-green c-vcAlign-middle">@{{item.subName}}</span>
          <!-- 答案为文字 -->
          <template v-if="item.msgType == 19">
            <span class="c-lh-28 c-wb-ba c-vcAlign-middle c-ws-pw" :class="isSelf ? 'c-fc-xblack':''" v-html="$options.filters.sensitiveWordFilter(item.content,this)"></span>
          </template>
          <!-- 答案为图片 -->
          <div v-else-if="item.msgType == 20" class="c-hh200 c-pb20 c-mt10" @click="clickPreviewImage(itemIndex)">
            <img class="c-br10 c-hh200 img-pe-none" :src="$addXossFilter(item.content, require('@/assets/no_chat_img.png'))" alt="" />
          </div>
          <!-- 答案为语音 -->
          <div v-else class="c-flex-row c-aligni-center c-fs20 c-mt10 " @touchstart='longTouchStart($event)' @touchmove='longTouchMove($event)' @touchend='longTouchEnd($event)'>
            <div @click="clickItemAudio(itemIndex)" :class="!isSelf ? 'c-bg-xblue c-fc-white':'c-bg-white c-fc-green'" :style="'width:' + (4.5 + item.voiceDuration * 1/10) + 'rem;'"
              class="c-p c-flex-row c-aligni-center c-ph16 c-hh64 c-br10">
              <div class="time-show" v-show="showCurTime">
                <span class="tip-icon"></span>
                <span class="c-fc-white c-fs30">{{curTime}}"</span>
              </div>
              <i @click="clickIconAudio(itemIndex)" class="iconfont c-pr10 c-fs40" :class="!isSelf ? 'c-fc-white':'c-fc-green'" v-show="playAduioSrc != item.content || playStatus== 0">&#xe869;</i>
              <i @click="clickPlayAudio(itemIndex)" class="iconfont c-pr10 c-fs40" :class="!isSelf ? 'c-fc-white':'c-fc-green'" v-show='playAduioSrc == item.content && playStatus == 1'>&#xe86a;</i>
              <input :class="!isSelf ? 'self-input' : 'other-input'" type="range" v-model="curTime" v-show="playAduioSrc == item.content" :max="item.voiceDuration" min="0" @input="dragOn($event)"
                @change='dragEnd($event)' :style="'background-size:' + curTime * 100/item.voiceDuration + '% 100%'">
              <div class="c-pl10 c-fs20 c-fc-xblack c-flex-grow1 c-w0 min-width c-textAlign-r">{{item.voiceDuration}}''</div>
            </div>
            <div class="c-pl10 c-fs20">
              <div v-if="!isSelf" v-show="localMsgReadList.indexOf(item.socialRoomMessageId) <= -1" class="c-ww8 c-hh8 c-brp50 red-point"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 发送视频,音频,图文资源 -->
      <div v-else-if="item.msgType == 31 || item.msgType == 32 || item.msgType == 33 || item.msgType == 34 || item.msgType == 35 || item.msgType == 37"
        :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" class="c-text-hidden c-bg-white c-ww400 c-textAlign-l">
        <div class="c-ph20 c-pv20 c-flex-row">
          <div class="c-maxh90 c-text-hidden c-br8" :class="item.msgType == 35 ? 'c-ww80':'c-ww120'">
            <img v-if="item.msgType != 35" class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/defult270.png'))" alt="" />
            <img v-else class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/examination_defult.png'))" alt="" />
          </div>
          <div class="c-flex-grow1 c-w0 c-pl20 c-lh28 c-fs24 ">
            <span class="c-text-ellipsis2">{{item.content}}</span>
          </div>
        </div>
        <div class="c-hh48 c-flex-row c-aligni-center c-ph20 c-bg-fa">
          <i v-if="item.msgType == 31" class="iconfont c-fs22 icon-video">&#xe707;</i>
          <i v-else-if="item.msgType == 32" class="iconfont c-fs22 icon-audio">&#xe756;</i>
          <i v-else-if="item.msgType == 33" class="iconfont c-fs22 icon-imgtext">&#xe755;</i>
          <i v-else-if="item.msgType == 34" class="iconfont c-fs22 icon-column">&#xe781;</i>
          <i v-else-if="item.msgType == 35" class="iconfont c-fs22 icon-exam">&#xe78f;</i>
          <i v-else-if="item.msgType == 37" class="iconfont c-fs22 icon-clock">&#xe806;</i>
          <span class="c-fs18 c-fc-gray c-pl10 c-flex-grow1 c-w0">{{mapType[item.msgType]}}</span>
          <span class="c-fs18 c-fc-gray c-pl10">{{mapLook[item.msgType]}}</span>
          <i class="iconfont c-fc-gray c-fs12">&#xe60e;</i>
        </div>
      </div>

      <!-- 发送活动资源 -->
      <div v-else-if="item.msgType == 36" :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" class="c-bg-white c-ww400 c-text-hidden c-textAlign-l">
        <div class="c-ph20 c-pt20 c-fs24 c-text-ellipsis2">{{item.content}}</div>
        <div class="c-ph20 c-fs16 c-flex-row c-aligni-center c-fc-gray c-pt20 c-pb10">
          <span class="c-flex-grow1 c-w0">{{item.subName}}</span>
          <span v-if="item.subContent">{{item.subContent}}</span>
        </div>
        <div class="c-mh20 c-ww380 c-amxh190 c-text-hidden c-br8 c-mb20">
          <img class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/activity_defult.png'))" alt="" />
        </div>
        <div class="c-hh48 c-flex-row c-aligni-center c-ph20 c-bg-fa">
          <i class="iconfont c-fs22 icon-activity">&#xea0b;</i>
          <span class="c-fs18 c-fc-gray c-pl10 c-flex-grow1 c-w0">{{mapType[item.msgType]}}</span>
          <span class="c-fs18 c-fc-gray c-pl10">{{mapLook[item.msgType]}}</span>
          <i class="iconfont c-fc-gray c-fs12">&#xe60e;</i>
        </div>
      </div>

      <!-- 发送带货 -->
      <div v-else-if="item.msgType == 70&& item.relationType!=this.relationTypeMap.coupon" :class="isSelf ? 'msg-box-br-right':'msg-box-br-left'" class="c-text-hidden c-bg-white c-ww400 c-textAlign-l">
        <div class="c-ph20 c-flex-row c-pv20">
          <!-- vip -->
          <div v-if="item.subProdType == 1 ||item.subProdType == 31" class="c-ww120 c-hh80 c-text-hidden c-br10 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'c-h'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover" />
            <img v-else :src="$addXossFilter(item.imgUrl, require('@/assets/i/wap/course/vip.png'))" class="c-w100 c-h" alt="">
          </div>
          <!-- svip -->
          <div v-else-if="item.subProdType == 23||item.subProdType == 32" class="c-ww120 c-hh80 c-text-hidden c-br10 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'c-h'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover" />
            <img v-else :src="$addXossFilter(item.imgUrl, require('@/assets/i/wap/course/svip.png'))" class="c-w100 c-h" alt="">
          </div>
          <img v-else :src="$addXossFilter((item.imgUrl || defaultImageMap[item.subProdType]), require('@/assets/defult270.png'))" alt="" class="c-ww120 c-hh80 c-text-hidden c-br10">
          <div class="c-flex-grow1 c-w0 c-pl16 c-flex-column c-justify-sb" :class="item.subProdType == 7 && item.relationType==relationTypeMap.flashSales && item.atName ? 'c-hh120':'c-hh80'">
            <div class="c-fs24 c-text-ellipsis1">
              <span class="bg-flashSales"
                v-if="item.relationType==relationTypeMap.flashSales || item.relationType==relationTypeMap.collage">{{item.relationType==relationTypeMap.flashSales?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):'拼团'}}</span>
              {{item.content}}
            </div>
            <div v-if="item.subProdType == 7 && item.relationType==relationTypeMap.flashSales && item.atName" class="c-fs12 c-text-ellipsis1 c-fc-sblack">{{item.atName}}</div>
            <div :class="item.subProdType == 76 ?'vis-hidden-important':''" class="c-fs24 c-fc-xlred">
              <span v-if="item.relationId!=0 && item.relationType!=0 " class="c-fc-xlred c-flex-grow1 c-w0"><span
                class="c-fc-gray c-fs18 text-decoration c-mr8">{{'￥' | iosPriceFilter}}{{item.subContent}}</span><span
                class="c-fc-gray c-fs18 c-mr8">{{item.relationType==relationTypeMap.flashSales?'折后价':item.relationType==relationTypeMap.collage?'团长价':''}}</span><span>{{'￥' | iosPriceFilter}}{{item.relationType==relationTypeMap.collage?item.playersPrice:item.price}}</span></span>
              <span v-else-if="(item.relationId==0 && item.relationType==0)"><span
                v-if="item.payType == 2 || item.payType == 4">{{'￥' | iosPriceFilter}}</span>{{item.payType == 2 || item.payType == 4 ? item.subContent : item.payType == 3 ? '加密' : (item.payType==5 ? '购买指定课程参与':(item.payType==6 ? '指定人员购买':'免费'))}}</span>
            </div>
          </div>
        </div>
        <div class="c-hh48 c-flex-row c-aligni-center c-ph20 c-bg-fa c-justify-sb">
          <div class="c-fs18 c-fc-gray">
            <span>{{item.subProdType == 5 ? courseTypeMap[item.voiceStatus]:mapRemType[item.subProdType]}}</span>
          </div>
          <div v-if="(item.payType == 2 || item.payType == 4) && item.subProdType == 76" class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="goRecommendDetail">立即填写</div>
          <div v-else-if="(item.payType == 2 || item.payType == 4) && item.subProdType == 86" class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="goRecommendDetail">立即预约</div>
          <div v-else-if="(item.payType == 2 || item.payType == 4) && item.subProdType == 7 || item.subProdType == 53" class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white"
            @click.stop="goRecommendDetail">立即报名</div>
          <div v-else-if="(item.payType == 2 || item.payType == 4) && item.subProdType == 1 || item.subProdType == 23" class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white"
            @click.stop="goRecommendDetail">{{'立即升级' | iosPayText('1')}}</div>
          <div v-else class="c-hh36 c-flex-row c-flex-center c-ph20 c-fs18 c-br20 button-buy c-fc-white" @click.stop="goRecommendDetail">
            <span v-if="(item.payType == 2 || item.payType == 4) && (item.subProdType == 12 || item.subProdType == 13)">立即购买</span>
            <span v-else-if="(item.payType == 2 || item.payType == 4)">{{'立即购买' | iosPayText('51')}}</span>
            <span v-else>查看详情</span>
          </div>
        </div>
      </div>
      <div class="c-fc-xblue c-fs20 c-ml20" v-if="((!isSelf&&!isTeacherSelf&&(userRole==4||userRole==6))||(isTeacherSelf&&isTeacher))&&(item.msgType != 66 && item.msgType != 65)&&!isFormPrivate" @click.stop="backInfo(itemIndex)">撤回</div>
    </div>
  </div>
</template>

<script>
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { goDetails } from "@/utils/goDetails.js";
// import redEnvelopes from "@/components/templates/livePersonal/redEnvelopes.vue";
const DEFAULT_EXAM_IMG = require('@/assets/examination_defult.png');
const DEFAULT_ACTIVITY_IMG = require('@/assets/activity_defult.png');
const DEFAULT_FORM_IMG = require('@/assets/form_defult.png');
const DEFAULT_DATUM_IMG = require('@/assets/datum_defult.png');
const DEFAULT_IMAGE_MAP = {
  7: DEFAULT_ACTIVITY_IMG,
  8: DEFAULT_DATUM_IMG,
  11: DEFAULT_EXAM_IMG,
  36: DEFAULT_ACTIVITY_IMG,
  76: DEFAULT_FORM_IMG,
};
export default {
  components: {
    // Range,
    VipCustomImg,
    // redEnvelopes
  },
  name: "socailChatItem",
  props: {
    localMsgReadList: {
      type: Array,
      default: () => []
    },
    playStatus: {
      type: Number,
      default: 0
    },
    playAudioIndex: {
      type: Number,
      default: -999
    },
    playAduioSrc: {
      type: String,
      default: ''
    },
    curTime: {
      type: Number,
      default: 0
    },
    itemIndex: {
      type: Number,
      default: -2
    },
    isSelf: {
      type: Boolean,
      default: false
    },
    isTeacherSelf: {
      type: Boolean,
      default: false
    },
    isTeacher: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: function () {
        return {}
      }
    },
    isFromLive: {
      type: Boolean,
      default: true
    },
    socialRoomId: {
      type: String,
      default: ''
    },
    sensitiveWord: {
      type: Array,
      default: () => []
    },
    userRole:{
       type: String,
      default: ''
    },
    isFormPrivate:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultImageMap: Object.freeze(DEFAULT_IMAGE_MAP),
      cfrom: global.ckFrom,
      relationTypeMap: global.relationTypeMap,
      showCurTime: false,
      mapType: {
        31: "视频",
        32: "音频",
        33: "图文",
        34: "专栏",
        35: "测评",
        36: "活动",
        37: "打卡"
      },
      mapLook: {
        31: "立即查看",
        32: "立即收听",
        33: "立即阅读",
        34: "立即查看",
        35: "立即测试",
        36: "立即参加",
        37: "立即打卡"
      },
      mapRemType: global.prodMapType,
      courseTypeMap: global.prodCourseType,
      isredEnvelopes:false, //红包弹窗
      redState:'',
      isGetRedEnvelopes:false, //领取弹窗
    };
  },
  filters: {
    sensitiveWordFilter: function (val, vm) {
      if (!val) return '';
      let resStr = val;
      let words = vm.sensitiveWord;
      words.forEach((item, index) => {
        let replaceStr = val.replace(/([^u4e00-u9fa5])(\s+)(?=[^u4e00-u9fa5])/g, '$1');
        let regEx = replaceStr.match(new RegExp(words[index], "g"));
        if (regEx != null) {
          val = replaceStr = replaceStr.replace(new RegExp(words[index], "g"), "*".repeat(item.length));
          resStr = replaceStr;
        } else {
          resStr = val;
        }
      });
      return resStr;
    }
  },
  methods: {
    backInfo(itemIndex) {
      this.$emit('adminBackInfo', itemIndex)
    },
    getRedEnvelopes(state) {
      this.isredEnvelopes = true
      this.redState = state
    },
    longTouchStart(e) {
      if (this.isSelf || this.isTeacherSelf) {
        e.stopPropagation();
        return false;
      }
    },
    longTouchMove(e) {
      if (this.isSelf || this.isTeacherSelf) {
        e.stopPropagation();
        return false;
      }
    },
    longTouchEnd(e) {
      if (this.isSelf) {
        e.stopPropagation();
        return false;
      }
    },

    dragOn(e) {
      this.showCurTime = true;
      console.log("dragOndragOn" + e.target.value);
      this.$emit("dragOn", e.target.value);
    },
    dragEnd(e) {
      setTimeout(() => {
        this.showCurTime = false;
        console.log(e.target.value);
        this.$emit("dragEnd", e.target.value);
      }, 300);
    },
    clickItemAudio(itemIndex) {
      if (this.playAudioIndex != itemIndex) {
        this.clickPlayAudio(itemIndex);
      }
    },
    reQuert(item) {
      if (item.msgType == 19 || item.msgType == 18 || item.msgType == 20 || item.msgType == 21) {
        this.$emit("reQuert", item);
      }
    },
    clickIconAudio(itemIndex) {
      if (this.playAudioIndex == itemIndex) {
        this.clickPlayAudio(itemIndex);
      }
    },
    clickPlayAudio(index) {
      let type = this.isTeacher ? 0 : 1;
      this.$emit("clickPlayAudio", index, type);
    },
    clickPreviewImage(index) {
      this.$emit("clickPreviewImage", index);
    },
    clickPlayMsgVideo() {
      let domId = this.isTeacher ? `#teacher${this.item.socialRoomMessageId}` : `#chat${this.item.socialRoomMessageId}`;
      if (!document.querySelector(domId)) {
        return;
      }
      document.querySelector(domId).className = 'c-ww200 c-hh114 c-p c-pz6';
      this.$emit('clickPlayMsgVideo', domId, this.item.content);
    },
    clickSourceItem() {
      if (this.item.msgType == 70) {
        this.goRecomDetail();
        return;
      }
      // 跳转到对应的详情页面 msgType值 31视频，32音频，33图文，34专栏，35测评，36活动，37打卡
      // 将msgType值转为goDetails.js中typeToUrl的key值
      let typeArr = [5, 5, 5, 9, 11, 7, 41];
      let arr = [31, 32, 33, 34, 35, 36, 37];
      let type = Number(this.item.msgType);
      if (!arr.includes(type)) {
        return;
      }
      let courseType = type == 32 ? 1 : type == 33 ? 2 : 0;
      type = typeArr[type - 31];
      goDetails(this, type, this.item.subMsgId, '', courseType);
    },
    timeChat(timeType) {
      let nowtime = new Date().getTime();
      let couponTime = new Date(timeType.replace(/-/g, '/')).getTime();
      if (nowtime >= couponTime) {
        return true
      }
    },
    goRecomDetail() {
      this.$emit('goDetail', this.item)
    },
    //查看好物推荐详情
    goRecommendDetail() {
      console.log(this.item.subProdType)
      if (this.item.subContent * 1 > 0 && this.item.subProdType * 1 != global.ckFrom.reservation && this.item.relationType != this.relationTypeMap.collage && this.item.subProdType * 1 != global.ckFrom.activity && this.item.subProdType * 1 != global.ckFrom.camp && this.item.subProdType * 1 != 76 && this.item.subProdType * 1 != global.ckFrom.booking && this.item.subProdType * 1 != global.ckFrom.shopping && this.item.subProdType * 1 != global.ckFrom.mall) {
        let data = {
          cId: '',
          ckFrom: '',
          extId: ''
        }
        if (this.item.subProdType * 1 == global.ckFrom.course) {
          data.cId = this.item.subMsgId
          data.extId = -1
          data.ckFrom = this.item.subProdType
        } else if (this.item.subProdType * 1 == global.ckFrom.camp) {
          data.cId = -1
          data.extId = this.item.subProdId
          data.ckFrom = this.item.subProdType
        } else {
          data.cId = -1
          data.extId = this.item.subMsgId
          data.ckFrom = this.item.subProdType
        }
        console.log(data)
        this.$emit("buyInfo", data, this.item)
      } else {
        console.log(this.item)
        if (this.item.relationType == this.relationTypeMap.collage) {
          if (this.item.status >= 3 || this.timeChat(this.item.endTime)) {
            this.$showCjToast({
              text: "活动已结束",
              type: "warn",
              time: 1500
            });
            return
          }
        }
        let prodItem = JSON.parse(JSON.stringify(this.item));
        prodItem.subProdType = prodItem.subProdType || prodItem.prodType;
        let isLive = (prodItem.subContent * 1 > 0 || prodItem.subProdType == global.ckFrom.activity || prodItem.subProdType == global.ckFrom.shopping || prodItem.subProdType == global.ckFrom.mall) ? 1 : 0;
        this.$emit('goDetail', prodItem, isLive);
      }
    }
  },
  activated() { },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.pickclassBoxSelf .choosePick {
  color: #ffffff;
}
.pickclassBox .choosePick {
  color: #fc583d;
}
</style>
<style scoped lang="scss">
.text-question {
  font-size: 0.45rem;
  border-radius: 50%;
  width: 0.7rem;
  height: 0.7rem;
  text-align: center;
  position: relative;
}
.other-que-icon {
  color: #fff;
  background-color: #ff7800;
}
.my-que-icon {
  color: #fff;
  background-color: #ff7800;
}
.other-answer-icon {
  color: #fff;
  background-color: #3acc68;
}
.my-answer-icon {
  color: #fff;
  background-color: #3acc68;
}
.transparent-text1 {
  color: rgba(255, 255, 255, 6);
  filter: alpha(opacity=60);
  /*IE滤镜，透明度10%*/
  -moz-opacity: 0.6;
  /*Firefox私有，透明度10%*/
  opacity: 0.6;
  /*其他，透明度10%*/
}
.qa-bd-t1-ff6 {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.red-point {
  background-color: #eb6370;
}

.icon-imgtext {
  color: #f0cd68;
}

.icon-video {
  color: #5b86df;
}

.icon-audio {
  color: #6bcaf1;
}

.icon-column {
  color: #82ccf6;
}

.icon-exam {
  color: #3a86f7;
}

.icon-clock {
  color: #ed776d;
}

.icon-activity {
  color: #f17763;
}

input[type="range"] {
  -webkit-appearance: none; /*清除系统默认样式*/
  width: 100%;
  background-size: 75% 100%; /*设置左右宽度比例*/
  height: 3px; /*横条的高度*/
}
.self-input {
  background: -webkit-linear-gradient(#fff, #fff) no-repeat, #8fda61; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
}
.other-input {
  background: -webkit-linear-gradient(#8fda61, #8fda61) no-repeat, #ededed; /*设置左边颜色为#61bd12，右边颜色为#ddd*/
}
/*拖动块的样式*/
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /*清除系统默认样式*/
  height: 0.5rem; /*拖动块高度*/
  width: 0.5rem; /*拖动块宽度*/
  background: #fff; /*拖动块背景*/
  border-radius: 50%; /*外观设置为圆形*/
  border: solid 1px #8fda61; /*设置边框*/
}
.min-width {
  min-width: 1.3rem;
}
.time-show {
  position: absolute;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  height: 1rem;
  line-height: 1rem;
  top: -1.25rem;
  left: 50%;
  background: rgba(255, 154, 43, 1);
  opacity: 0.8;
  border-radius: 0.5rem;
  transform: translate(-50%);
}
.tip-icon {
  position: absolute;
  bottom: -0.5rem;
  left: 0.75rem;
  width: 0;
  height: 0;
  border: 0.3rem solid #ff9a2b;
  border-color: #ff9a2b transparent transparent transparent;
}
.msg-box-br-left {
  border-radius: 0 0.4rem 0.4rem 0.4rem;
}
.msg-box-br-right {
  border-radius: 0.4rem 0 0.4rem 0.4rem;
}
.button-buy {
  background:#2194ff;
}
.text-decoration {
  text-decoration: line-through;
}
.c-bg-orglinera {
  background: linear-gradient(
    90deg,
    rgba(240, 132, 70, 1),
    rgba(255, 114, 37, 1)
  );
}
.c-bg-grelinera {
  background: linear-gradient(
    90deg,
    rgba(113, 219, 120, 1),
    rgba(69, 185, 48, 1)
  );
}
.bg-flashSales {
  display: inline-block;
  font-size: 0.4rem;
  padding: 0rem 0.25rem;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 83, 85, 1) 0%,
    rgba(255, 83, 85, 0.7) 100%
  );
  border-radius: 0.35rem 0 0.35rem 0;
}
/* 红包 */
.redpacket-pic{
  height: .55rem;
  width: .4rem;
  background: url("../../../assets/i/wap/live/redPacket/redpacker_16_22.png") no-repeat top center;
  background-size:100%;
}
.redpacket{
  padding: 0 .6rem;
  width: 9rem;
  height: 2.7rem;
  overflow:hidden;
  background: url("../../../assets/i/wap/live/redPacket/redpacker_msg_bg1.png") no-repeat top center;
  background-size:100%;
  .pic{
    width:1.3rem;
    height:1.5rem;
    overflow:hidden;
    background:url("../../../assets/i/wap/live/redPacket/redpacker_52_60.png") no-repeat top center;
    background-size:100%;
  }
  &.disabled{
    opacity: 0.3;
  }
}
</style>
